<template>
	<view class="collocation-goods-box">
		<view class="title">为您推荐</view>
		<view class="collocation-content">
			<view class="goods-item" v-for="(item,i) in goodsCollocation" :key="i" @click="goGoodsPage(item)">
				<view class="goods-item-content">
					<view class="goods-top">
						<Img :src="item.goodsImage" :customStyle="{width:'342rpx',height:'342rpx',borderRadius:'8rpx'}"  class="goods-img"/>
					</view>
					<view class="goods-info">
						<view class="hidden-1 goods-name">{{item.goodsName}}</view>
						<view class="hidden-1 goods-brand">{{item.brandName}}</view>
						<view class="hidden-1 goods-spec">{{item.goodsSpec}}</view>
					</view>
					<view class="goods-bottom">
						<view class="price-box">
							<price :price="item.goodsPrice" :taxPrice="item.goodsCostPrice" />
							<!-- <view class="now-price">￥{{item.goodsPrice}}</view>
							<view class="before-price">￥{{item.goodsCostPrice}}</view> -->
						</view>
						<!-- <view class="goods-add-cart"><add-cart  :goods="item" /></view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	import Img from '@/components/goods/img.vue'
	import addCart from './../../components/goods/addCart.vue'
	import price from '@/components/goods/price.vue'
	export default {
		components:{Img,addCart,price},
		props:{
			storeInfo:{
				type:Object,
				default:()=>{}
			}
		},
		data() {
			return {
			}
		},
		computed:{
			...mapState({
				goodsCollocation: state => state.goods.goodsCollocation,
			})
		},
		created() {
			this.getGoodsCollocation()
		},
		methods: {
			...mapActions(['ActGetGoodsCollocation']),
			async getGoodsCollocation(){
				await this.ActGetGoodsCollocation({storeId:uni.getStorageSync('storeId'),current:1,size:10})
			},
			goGoodsPage(item){
				this.$u.route({
					url: 'pages/goods/detail',
					params: {
						id: item.goodsId
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hidden-1{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.collocation-goods-box{
		padding-top:48rpx;
		.title{
			color:$u-main-color;
			font-size: 34rpx;
			font-weight: 500;
			margin-bottom:24rpx;
		}
		.collocation-content{
			display: flex;
			// align-content:space-between;
			flex-wrap:wrap;
			justify-content:space-between;
			.goods-item{
				width:342rpx;
				background: #fff;
				margin-bottom:18rpx;
				.goods-info{
					padding:8rpx 10rpx 0rpx 16rpx;
					.goods-name{
						font-size: 26rpx;
						color:$u-main-color;
						line-height: 36rpx;
					}
					.goods-brand,.goods-spec{
						font-size: 24rpx;
						color:$u-tips-color;
					}
				}
				.goods-bottom{
					padding:4rpx 10rpx 4rpx 16rpx;
					.now-price{
						color:$u-type-error;
						font-size: 26rpx;
						font-weight: 700;
						word-break: break-all;
						word-wrap:break-word;
						white-space:normal;
					}
					.before-price{
						color:$u-tips-color;
						font-size: 22rpx;
						text-decoration:line-through;
					}
					.goods-add-cart{
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
	}
</style>
